<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>p3_CSS常用值</title>
  <style>
    h1{
      /* 单词表示法 */
      color: red;
      /* rgb(red,green,blue)表示法 范围[0,255]*/
      color: rgb(255,0,0);
      color: rgb(0,255,255);
      color: rgb(0,255,0);
      color: rgb(255,0,255);
      color: rgb(0,0,255);
      color: rgb(255,255,0);
      color: rgb(255,255,255);
      color: rgb(0,0,0);
      color: rgb(128,128,128);
    /* 十六进制颜色表示法 #rrggbb 取值范围0~9,a~f 不区分大小写*/
      color:#FF0000;
      color:#00FF00;
      color:#0000FF;
      color:#FFFFff;
      color:#000000;
      color:#808080;
      /* 十六进制简写形式 #rgb 取值范围0~9,a~f 不区分大小写 只有三组颜色的两个数字都相同才能简写！*/
      color: #F00;
      color: #0F0;
      color: #00F;
      color: #Fff;
      color: #000;
      color:#808080;
    /* 带不透明度的颜色 rgba(red,green,blue,alpha) 不透明度，0~1 0透明到看不见 1完全不透明 */
      color:rgba(0,0,255,1);
      color:rgba(0,0,255,0.7);
      color: rgba(0,0,255,0.4);
      color: rgba(0,0,255,0.2);
      color: rgba(0,0,255,.1);
      color: rgba(0,0,255,0);
    }
    .d1{
        width: 500px;
        height: 300px;
        /* 渐变色：角度值（单位为deg）,颜色1，颜色2...*/
        background-image: linear-gradient(45deg,red,cyan,pink,purple);
    }
    .d2{
        /* 块级元素的默认宽度为父级宽度的100% 高度为0 靠内容撑起来*/
        width: 50px;
        height: 100px;
        /* 插入背景图，注意背景图所处的区域必须有大小*/
        background-image: url(img/mr.png);
        /* 设置背景图的尺寸：宽度 高度 */
        background-size: 50px 100px;
        /* 也可以同时设置背景色 没有图的地方显示背景色*/
        background-color: black;
    }
    /* div d3 宽高：500*300，有5像素的红色边框，插入鸣人背景图 */
    .d3{
        width: 500px;
        height: 300px;
        border: 5px solid #f00;
        background-image: url("img/mr.png");
        /* 设置背景图不允许重复*/
        background-repeat: no-repeat;
        /* 设置背景图的位置 原点在左上角 右&下是正方向*/
        background-position: left top;/*左上*/
        background-position: center;/*居中,两个center可以简写成一个*/
        background-position: right bottom;/*右下*/
        background-position: 0 0;/*可以使用像素值，0可以不带单位，原点左上角*/
        background-position: 50px 0;/*往右*/
        background-position: -50px 100px;/*左下*/
        /* 这里的百分比是"区域总大小-背景图大小"剩余空间的百分比*/
        background-position: 50% 50%;/*居中*/
        background-position: 100% 100%;/*右下角*/
    }
  </style>
</head>
<body>
    <h1>测试颜色</h1>
    <div class="d1"></div>
    <div class="d2"></div>
    <div class="d3"></div>

</body>
</html>